<template>
  <div class="mine">
    <van-nav-bar title="个人中心" />
    
    <div class="page-content">
      <div class="user-info">
        <div class="avatar">
          <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="Avatar" />
        </div>
        <div class="user-details">
          <div class="user-name">张工程师</div>
          <div class="user-role">质检员 | A级</div>
        </div>
      </div>
      
      <div class="stats-card">
        <div class="stat-item">
          <div class="stat-value">18</div>
          <div class="stat-label">上报总数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">12</div>
          <div class="stat-label">已处理</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">6</div>
          <div class="stat-label">待处理</div>
        </div>
      </div>
      
      <div class="menu-list">
        <van-cell-group>
          <van-cell title="我的上报" is-link icon="records" />
          <van-cell title="我的任务" is-link icon="todo-list-o" />
          <van-cell title="消息通知" is-link icon="envelop-o" />
          <van-cell title="设置" is-link icon="setting-o" />
          <van-cell title="帮助中心" is-link icon="question-o" />
        </van-cell-group>
      </div>
      
      <div class="logout-btn">
        <van-button round block type="danger">退出登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MineView"
};
</script>

<style scoped>
.mine {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.page-content {
  margin-top: 46px;
  flex: 1;
  overflow-y: auto;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #1989fa;
  color: white;
}

.avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
  border: 2px solid white;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-role {
  font-size: 14px;
  opacity: 0.9;
}

.stats-card {
  display: flex;
  background-color: white;
  padding: 15px 0;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
}

.stat-item {
  flex: 1;
  text-align: center;
  border-right: 1px solid #ebedf0;
}

.stat-item:last-child {
  border-right: none;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #1989fa;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #646566;
}

.menu-list {
  margin-bottom: 20px;
}

.logout-btn {
  padding: 20px;
}
</style> 